<script lang="ts" setup>
import type { VbenFormSchema } from '@vben/common-ui';

import { computed, markRaw } from 'vue';

import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { useAppstoreStore } from '#/store';

defineOptions({ name: 'Login' });

const appstoreStore = useAppstoreStore();
const formSchema = computed((): VbenFormSchema[] => {
  return [
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: $t('authentication.usernameTip'),
      },
      fieldName: 'username',
      label: $t('authentication.username'),
      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
    },
    {
      component: 'VbenInputPassword',
      componentProps: {
        placeholder: $t('authentication.password'),
      },
      fieldName: 'password',
      label: $t('authentication.password'),
      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
    },
    {
      component: markRaw(SliderCaptcha),
      fieldName: 'captcha',
      rules: z.boolean().refine((value) => value, {
        message: $t('authentication.verifyRequiredTip'),
      }),
    },
  ];
});
const handleGo = () => {
  window.open('https://www.thinkcmf.com/register.html', '_blank');
};
</script>

<template>
  <AuthenticationLogin
    :form-schema="formSchema"
    :loading="appstoreStore.loginLoading"
    :show-code-login="false"
    :show-qrcode-login="false"
    :show-register="true"
    :show-remember-me="false"
    :show-third-party-login="false"
    @submit="appstoreStore.appStoreLogin"
  >
    <template #title>
      <div class="mb-7 sm:mx-auto sm:w-full sm:max-w-md">
        <h2
          class="text-foreground mb-3 text-3xl font-bold leading-9 tracking-tight lg:text-4xl"
        >
          登录
        </h2>

        <p class="text-muted-foreground lg:text-md text-sm">
          登录THINKCMF账号，进行后续操作！
        </p>
      </div>
    </template>
    <template #to-register>
      <div class="mt-3 text-center text-sm">
        <p>
          {{ $t('authentication.accountTip') }}
          <span class="vben-link text-sm font-normal" @click="handleGo()">
            {{ $t('authentication.createAccount') }}
          </span>
        </p>
        <p class="mt-3">
          <span
            class="vben-link text-sm font-normal"
            @click="() => (appstoreStore.showLoginModel = false)"
          >
            暂不登陆
          </span>
        </p>
      </div>
    </template>
  </AuthenticationLogin>
</template>
